<template>
	<view>
		<view>
			<uni-steps :options="list" :active="active" />
		</view>
		<view style="padding: 30rpx;">
			<view style="border-bottom: 1px solid #dddddd;padding: 25rpx;">
				<uni-row>
					<uni-col :span="6">
						服务区域<span style="color: red;">*</span>
					</uni-col>
					<uni-col :span="18">
						<uni-data-picker :localdata="areaTree" v-model="areaId" preload="preload" ref="areaPicker"
							@change="areaClick">
						</uni-data-picker>
					</uni-col>

				</uni-row>
			</view>
			<view style="border-bottom: 1px solid #dddddd;padding: 25rpx;">
				<uni-row>
					<uni-col :span="6">
						服务品类<span style="color: red;">*</span>
					</uni-col>
					<uni-col :span="18">
						<uni-data-picker :localdata="categoryTree" v-model="categoryId" preload="preload"
							ref="categoryPicker" @change="categoryClick">
						</uni-data-picker>
					</uni-col>
				</uni-row>
			</view>
		</view>
		<view style="text-align: center; margin-top: 20rpx;">
			<button type="primary" size="mini" style="width: 80%;" @click="addService()">
				下一步
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 1,
				list: [{
					title: '身份认证'
				}, {
					title: '设置服务'
				}, {
					title: '资质审核'
				}, {
					title: '完成'
				}],
				areaId: '',
				categoryId: '',
				categoryTree: [],
				areaTree: []
			}
		},
		onLoad() {
			// 加载区域根目录
			uni.request({
				url: 'http://120.46.197.40:8080/api/area/query/page',
				method: 'POST',
				data: {
					"pageNo": 1,
					"pageRow": 100
				},
				header: {
					'content-type': 'application/json'
				},
				success: (res) => {
					let arr = res.data.data.objects;
					for (let i = 0; i < arr.length; i++) {
						let obj = {
							"text": arr[i].name,
							"value": arr[i].id
						}
						if (arr[i].depth != 3) {
							obj.children = [];
						}
						this.areaTree.push(obj);
					}
					//console.log(this.areaTree);
				}
			});
			// 加载分类根目录
			uni.request({
				url: 'http://120.46.197.40:8080/api/category/query/page',
				method: 'POST',
				data: {
					"pageNo": 1,
					"pageRow": 100
				},
				header: {
					'content-type': 'application/json'
				},
				success: (res) => {
					let arr = res.data.data.objects;
					for (let i = 0; i < arr.length; i++) {
						let obj = {
							"text": arr[i].name,
							"value": arr[i].id
						}
						if (arr[i].depth != 3) {
							obj.children = [];
						}
						this.categoryTree.push(obj);
					}
				}
			});
		},
		methods: {
			// 点击区域后获取子栏目信息或选中子目录
			areaClick(e) {
				if (!e.detail.value[0]) {
					return;
				}
				let value1 = e.detail.value[0].value;
				let index1 = this.getIndex(this.areaTree, value1);
				let value = value1;
				let index2 = null;
				if (e.detail.value[1]) {
					let value2 = e.detail.value[1].value
					value = value2;
					index2 = this.getIndex(this.areaTree[index1].children, value2);
				}
				let level = e.detail.value.length;

				uni.request({
					url: 'http://120.46.197.40:8080/api/area/' + value + '/children',
					method: 'GET',
					data: {},
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: (res) => {
						let cityList = [];

						let arr = res.data.data;
						for (let i = 0; i < arr.length; i++) {
							let obj = {
								"text": arr[i].name,
								"value": arr[i].id
							}
							cityList.push(obj);
						}
						if (level == 1) {
							this.areaTree[index1].children = cityList;
						}
						if (level == 2) {
							this.areaTree[index1].children[index2].children = cityList;
						}
						if (level != 3) {
							this.$refs.areaPicker.show();
						}
					}
				});
			},
			categoryClick(e) {
				if (!e.detail.value[0]) {
					return;
				}
				let value1 = e.detail.value[0].value;
				let index1 = this.getIndex(this.categoryTree, value1);
				let value = value1;
				let index2 = null;
				if (e.detail.value[1]) {
					let value2 = e.detail.value[1].value
					value = value2;
					index2 = this.getIndex(this.categoryTree[index1].children, value2);
				}
				let level = e.detail.value.length;

				uni.request({
					url: 'http://120.46.197.40:8080/api/category/' + value + '/children',
					method: 'GET',
					data: {},
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: (res) => {
						let cityList = [];

						let arr = res.data.data;
						for (let i = 0; i < arr.length; i++) {
							let obj = {
								"text": arr[i].name,
								"value": arr[i].id
							}
							cityList.push(obj);
						}
						if (level == 1) {
							this.categoryTree[index1].children = cityList;
						}
						if (level == 2) {
							this.categoryTree[index1].children[index2].children = cityList;
						}
						if (level != 3) {
							this.$refs.categoryPicker.show();
						}
					}
				});
			},
			getIndex(arr, id) {
				for (let i = 0; i < arr.length; i++) {
					if (arr[i].value == id) {
						return i;
					}
				}
			},
			addService() {
				uni.request({
					url: 'http://120.46.197.40:8080/api/userAuthentication/userCategoryAuthentication',
					method: 'POST',
					data: {
						"areaIds": [this.areaId],
						"categoryIds": [this.categoryId],
						"userId": this.userId
					},
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						console.log(res);
						if(res.data.code==0){
							uni.navigateTo({
								url:"/pages/home/workman/process"
							})
						}
					}
				});
			}
		}
	}
</script>

<style>

</style>
